<template>
  <img
    v-if="imgPath"
    :src="checkFileUrl(imgPath)"
    :style="imgStyle"
    :class="classList"
    :alt="imgAlt"
    @error="imgError"
    @click="handleClick"
  >
  <img
    v-else
    src="@/assets/img/def.png"
    :style="imgStyle"
    :class="classList"
    alt=""
    @click="handleClick"
  >
</template>

<script setup>

const emit = defineEmits(['imgError', 'handleClick'])
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  imgAlt: {
    type: String,
    default: ''
  },
  classList: {
    type: Array,
    default: () => {
      return []
    }
  },
  imgStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const imgPath = ref('')

watch(() => props.src, (path) => {
  imgPath.value = path
}, {
  immediate: true
})

const imgError = () => {
  imgPath.value = ''
  emit('imgError')
}

const handleClick = () => {
  emit('handleClick')
}

</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 100%;
}
</style>
